<template>
  <div :class="['rawitem', contentType.toLowerCase()]">
    <!-- 直接内容类型 -->
    <template v-if="Object.is(contentType, 'RAW')">
      <template v-if="Object.is(predefinedType, 'STATIC_VIDEOPLAYER')">
        <app-video :videoParmas="rawitemParam"></app-video>
      </template>
      <template v-else>
        <template v-if="Object.is(renderMode, 'TEXT')">
          <span :style="rawItemDetail.predefinedType == 'AUTH_LOGINMSG' ? 'color:red;'+cssStyle : cssStyle">{{ content }}</span>
        </template>
        <template v-else-if="Object.is(renderMode, 'HEADING1')">
          <h1 :style="cssStyle">{{ content }}</h1>
        </template>
        <template v-else-if="Object.is(renderMode, 'HEADING2')">
          <h2 :style="cssStyle">{{ content }}</h2>
        </template>
        <template v-else-if="Object.is(renderMode, 'HEADING3')">
          <h3 :style="cssStyle">{{ content }}</h3>
        </template>
        <template v-else-if="Object.is(renderMode, 'HEADING4')">
          <h4 :style="cssStyle">{{ content }}</h4>
        </template>
        <template v-else-if="Object.is(renderMode, 'HEADING5')">
          <h5 :style="cssStyle">{{ content }}</h5>
        </template>
        <template v-else-if="Object.is(renderMode, 'HEADING6')">
          <h6 :style="cssStyle">{{ content }}</h6>
        </template>
        <template v-else-if="Object.is(renderMode, 'PARAGRAPH')">
          <p :style="cssStyle">{{ content }}</p>
        </template>
      </template>
    </template>
    <!-- 图片类型 -->
    <template v-else-if="Object.is(contentType, 'IMAGE')">
      <template v-if="Object.is(predefinedType, 'STATIC_CAROUSEL')">
        <app-carousel
          :data="rawItemDetail"
          @item-click="onItemClick"
        ></app-carousel>
      </template>
      <template v-else>
        <img :style="cssStyle" v-if="imgUrl" :src="imgUrl" />
        <i :style="cssStyle" v-else :class="imageClass ? imageClass : ''"></i>
      </template>
    </template>
    <!-- HTML类型 -->
    <template v-else-if="Object.is(contentType, 'HTML')">
      <div :style="cssStyle" v-html="content" />
    </template>
    <!-- MARKDOWN类型 -->
    <template v-else-if="Object.is(contentType, 'MARKDOWN')">
      <app-markdown-editor
        :style="cssStyle"
        mode="PREVIEWONLY"
        :itemValue="itemValue"
      ></app-markdown-editor>
    </template>
  </div>
</template>

<script lang='ts'>
import { Component, Vue, Prop } from "vue-property-decorator";

@Component({})
export default class AppRawItem extends Vue {
    /**
     * 应用上下文
     *
     * @type {string}
     * @memberof AppRawItem
     */
    @Prop() public context!: any;

    /**
     * 视图参数
     *
     * @type {string}
     * @memberof AppRawItem
     */
    @Prop() public viewparams!: any;

    /**
     * 内容类型
     *
     * @type {string}
     * @memberof AppRawItem
     */
    @Prop({ default: "RAW" }) public contentType!:
      | "RAW"
      | "HTML"
      | "IMAGE"
      | "MARKDOWN";

    /**
     * 直接内容详情
     *
     * @type {*}
     * @memberof AppRawItem
     */
    @Prop() public rawItemDetail: any;

    /**
     * 内容
     *
     * @type {string}
     * @memberof AppRawItem
     */
    @Prop() public content?: string;

    /**
     * 图标
     *
     * @type {string}
     * @memberof AppRawItem
     */
    @Prop() public imageClass?: string;

    /**
     * 图片
     *
     * @type {string}
     * @memberof AppRawItem
     */
    @Prop() public imgUrl?: string;

    /**
     * 直接内容参数
     */
    public rawitemParam: any = {};

    /**
     * 编辑器值
     *
     * @type {*}
     * @memberof AppRawItem
     */
    @Prop() public itemValue?: any;

    /**
     * 内容样式
     */
    public cssStyle?: string;
    /**
     * 绘制模式
     *
     * @type {string}
     * @memberof AppRawItem
     */
    public renderMode:
      | "TEXT"
      | "HEADING1"
      | "HEADING2"
      | "HEADING3"
      | "HEADING4"
      | "HEADING5"
      | "HEADING6"
      | "PARAGRAPH"
      | "" = "";

    /**
     * 预定义类型
     *
     * @type {string}
     * @memberof AppRawItem
     */
    public predefinedType: string = "";

    /**
     * 构建之前
     *
     * @type {*}
     * @memberof AppRawItem
     */
    public created() {
      // 直接内容识别绘制模式
      if (Object.is(this.contentType, "RAW")) {
        this.renderMode = this.rawItemDetail.renderMode
          ? this.rawItemDetail.renderMode
          : "";
      }
      // 预定义类型 主要识别轮播图和视频播放
      this.predefinedType = this.rawItemDetail.predefinedType
        ? this.rawItemDetail.predefinedType
        : "";
      this.rawItemDetail.cssStyle
        ? (this.cssStyle = this.rawItemDetail.cssStyle)
        : (this.cssStyle = "");
      if (this.predefinedType === "STATIC_VIDEOPLAYER") {
        this.rawitemParam = this.formatParam(
          this.rawItemDetail.getPSRawItemParams
        );
      }
    }

    /**
     * 格式化k=v结构数据
     *
     * @param rawitemParam 直接内容参数
     * @memberof AppRawItem
     */
    formatParam(rawitemParam: any) {
      if (!rawitemParam) {
        return {};
      }
      let Param: any = {};
      rawitemParam?.forEach((element: any) => {
        Param[element.key.toLowerCase()] = element.value;
      });
      return Param;
    }

    /**
     * 行为项点击
     *
     * @type {*}
     * @memberof AppRawItem
     */
    public onItemClick(data: any) {
      //todo 轮播图项点击
    }
}
</script>

<style lang='less'>
@import "./app-rawitem.less";
</style>